<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{
            color: aqua;
        }
    </style>
</head>
<body>
    <div id="calculator"> 
        <h1 id="title" class="title">计算器</h1>
        数字1: <input id="num1" type="text" onkeydown="onlyNum()">
        <br/>
        数字2: <input id="num2" type="text" onkeydown="onlyNum()">
        <br/>
        <button id="add">相加</button>
        <button id="sub">相减</button>
        <button id="mul">相乘</button>
        <button id="cle">清空</button>
        <br>
        <input id="res" type="number">
    </div>
    
    <script>
        document.querySelector("#add").addEventListener("click", add)
        document.querySelector("#sub").addEventListener("click", sub)
        document.querySelector("#mul").addEventListener("click", mul)
        document.querySelector("#cle").addEventListener("click", cle)
        function add(){
            const num1 = document.getElementById("num1").value
            const num2 = document.getElementById("num2").value
            var res = parseInt(num1)+parseInt(num2) 
            document.getElementById("res").value = res
        }
        function sub(){
            const num1 = document.getElementById("num1").value
            const num2 = document.getElementById("num2").value
            var res = parseInt(num1)-parseInt(num2) 
            document.getElementById("res").value = res
        }
        function mul(){
            const num1 = document.getElementById("num1").value
            const num2 = document.getElementById("num2").value
            var res = parseInt(num1)*parseInt(num2) 
            document.getElementById("res").value = res
        }
        function cle(){
            document.getElementById("num1").value = ""
            document.getElementById("num2").value = ""
            document.getElementById("res").value = ""        
        }
        
        function onlyNum()
        {
        if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
            {
            if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
                {
                event.returnValue=false;
                }
            }
        }
    </script>

</body>
</html>